<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>录入成绩 - 专业挖掘机培训系统</title>
    <link href="static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="static/h-ui.admin/css/style.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <style>
         :root {
            --primary-color: #1890ff;
            --success-color: #52c41a;
            --danger-color: #ff4d4f;
            --border-radius: 4px;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            padding: 20px;
            background: #f0f2f5;
        }
        
        .form-container {
            background: #fff;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
        
        .page-title {
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid #f0f0f0;
            font-size: 18px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
        }
        
        .input-text {
            width: 100%;
            height: 32px;
            padding: 4px 11px;
            border: 1px solid #d9d9d9;
            border-radius: var(--border-radius);
            transition: all 0.3s;
        }
        
        .input-text:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            outline: none;
        }
        
        .select {
            width: 100%;
            height: 32px;
            padding: 4px 11px;
            border: 1px solid #d9d9d9;
            border-radius: var(--border-radius);
            transition: all 0.3s;
            background-color: #fff;
        }
        
        .select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            outline: none;
        }
        
        .btn-container {
            margin-top: 24px;
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        
        .btn {
            height: 32px;
            padding: 0 16px;
            border-radius: var(--border-radius);
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
        }
        
        .btn-primary {
            background: var(--primary-color);
            color: #fff;
        }
        
        .btn-primary:hover {
            background: #40a9ff;
            transform: translateY(-1px);
        }
        
        .btn-default {
            background: #fff;
            border: 1px solid #d9d9d9;
            color: rgba(0, 0, 0, 0.65);
        }
        
        .btn-default:hover {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .required::after {
            content: '*';
            color: #ff4d4f;
            margin-left: 4px;
        }
    </style>
</head>

<body>
    <div class="form-container">
        <h3 class="page-title">录入成绩</h3>
        <form id="scoreForm">
            <div class="form-group">
                <label class="form-label required">考试科目</label>
                <select class="select" name="subject" required>
                    <option value="">请选择科目</option>
                    <option value="科目一">科目一</option>
                    <option value="科目二">科目二</option>
                    <option value="科目三">科目三</option>
                    <option value="科目四">科目四</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label required">学员姓名</label>
                <select class="select" name="member_name" required>
                    <option value="">请选择学员</option>
                    <!-- 学员列表将通过AJAX动态加载 -->
                </select>
            </div>
            <div class="form-group">
                <label class="form-label required">考试成绩</label>
                <input type="number" class="input-text" name="score" min="0" max="100" required>
            </div>
            <div class="btn-container">
                <button type="button" class="btn btn-default" onclick="window.close()">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveData()">保存</button>
            </div>
        </form>
    </div>

    <script src="lib/jquery/1.9.1/jquery.min.js"></script>
    <script>
        // 页面加载时获取学员列表
        $(document).ready(function() {
            $.ajax({
                url: '/api/members',
                method: 'GET',
                success: function(res) {
                    if (res.code === 0) {
                        let html = '<option value="">请选择学员</option>';
                        res.data.forEach(item => {
                            html += `<option value="${item.id}">${item.name}</option>`;
                        });
                        $('select[name="member_name"]').html(html);
                    }
                }
            });
        });

        function saveData() {
            const formData = $('#scoreForm').serialize();

            $.ajax({
                url: '/api/scores',
                method: 'POST',
                data: formData,
                success: function(res) {
                    if (res.code === 0) {
                        alert('添加成功');
                        window.opener.location.reload();
                        window.close();
                    } else {
                        alert(res.msg || '添加失败');
                    }
                },
                error: function() {
                    alert('系统错误');
                }
            });
        }
    </script>
</body>

</html>